// 最大的组件，相当于vue中的app.vue
import logo from './logo.svg';
import './App.css';

function App() {
  let age = 18;
  let name = 'Jack';
  let class1 = 'red';
  let color1 = 'red';
  let style1 = {fontSize: '40px'};
  let hasWude = false;
  let arr = [1,2,3,4];
  let obj = {name: 'Tom'}
  return (
    <div className="App"> 
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p title={name}>{age+1}</p>
        <p style={{color: color1}}>{name}</p>
        <p style={style1}>{hasWude?null:'不'}讲武德</p>
        <p className={class1}>{arr}</p>
        <p>{obj.name}</p>
        {/* 循环渲染 */}
        {
          arr.map(item => {
            return <button key={item}>{item}</button>
          })
        }
        {/* 条件渲染 */}
        {
          (function() {
            if(hasWude) {
              return <div>6666</div>
            }else {
              return <div>7777</div>
            }
          })()
        }
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
